<template>
	<view class="">
		<view class="padding-40">
			<u-row>
				<u-col span="5" @click="openTimePicker('start')">
					<u-input placeholder="请选择开始时间" border="surround" v-model="workShoftData.timeStar" clearable disabled disabledColor="#fff" />
				</u-col>
				<u-col span="2">
					<view class="text-align-center">至</view>
				</u-col>
				<u-col span="5" @click="openTimePicker('end')">
					<u-input placeholder="请选择结束时间" border="surround" v-model="workShoftData.timeEnd" clearable disabled disabledColor="#fff" />
				</u-col>
			</u-row>
			<view class="pt-80 pb-80">
				<u-checkbox-group v-model="selectList" @change="checkboxChange">
					<view class="flex flex--wrap">
						<u-checkbox 
							:customStyle="{marginBottom: '16px',marginRight: '16px'}" 
							v-for="(item, index) in checkboxList" 
							:key="index"
							:label="item.name" 
							:name="item.value">
						</u-checkbox>
					</view>
				</u-checkbox-group>
			</view>
			<view class="">
				<u-button text="确定" color="#e54d42" @click="submint" />
			</view>
			<u-datetime-picker :show="showTime" v-model="time" mode="time" @cancel="showTime=false" @confirm="setTime"/>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeType: 'start',
				showTime: false,
				time: '',
				selectList:[],
				workShoftData:{
					staffId: null,
					sunday:false,
					monday:false,
					tuesday:false,
					wednesday:false,
					thursday:false,
					friday:false,
					saturday:false,
					timeStar: '',
					timeEnd:''
				},
				checkboxList: [
					{ name: '周日', value: 'sunday'},
					{ name: '周一', value: 'monday'},
					{ name: '周二', value: 'tuesday'},
					{ name: '周三', value: 'wednesday'},
					{ name: '周四', value: 'thursday'},
					{ name: '周五', value: 'friday'},
					{ name: '周六', value: 'saturday'},
				],
			}
		},
		onLoad(opt) {
			this.workShoftData.staffId = opt.staffId
			if (opt.id) {
				this.getDetail(opt.id)
				uni.setNavigationBarTitle({
					title: '编辑排班'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '添加排班'
				});
			}
		},
		methods: {
			checkboxChange(arr){
				this.workShoftData.sunday = arr.findIndex(name=> name === 'sunday') !== -1?true:false
				this.workShoftData.monday = arr.findIndex(name=> name === 'monday') !== -1?true:false
				this.workShoftData.tuesday = arr.findIndex(name=> name === 'tuesday') !== -1?true:false
				this.workShoftData.wednesday = arr.findIndex(name=> name === 'wednesday') !== -1?true:false
				this.workShoftData.thursday = arr.findIndex(name=> name === 'thursday') !== -1?true:false
				this.workShoftData.friday = arr.findIndex(name=> name === 'friday') !== -1?true:false
				this.workShoftData.saturday = arr.findIndex(name=> name === 'saturday') !== -1?true:false
			},
			openTimePicker(name){
				this.timeType = name
				this.showTime = true
			},
			setTime(e){
				if(this.timeType==='start'){
					this.workShoftData.timeStar = e.value
				}else if (this.timeType === 'end'){
					this.workShoftData.timeEnd = e.value
				}
				this.showTime = false
			},
			getDetail(id){
				this.$reqJsonPost('StoreStaffScheduleGetEdit',{id: id}).then(res=>{
					this.workShoftData = res.data
					const nArr = [
						{value:res.data.friday, name:'friday',},
						{value:res.data.monday,name:'monday'},
						{value:res.data.sunday,name:'sunday'},
						{value:res.data.saturday,name:'saturday'},
						{value:res.data.thursday,name:'thursday'},
						{value:res.data.tuesday,name:'tuesday'},
						{value:res.data.wednesday,name:'wednesday'}
					]
					this.selectList = nArr.filter(item => item.value === true).map(jm=>jm.name)
				})
			},
			submint(){
				if(uni.$u.test.isEmpty(this.workShoftData.timeStar)){
					this.$refs.uToast.show({message:'请选择开始时间'})
				}else if(uni.$u.test.isEmpty(this.workShoftData.timeEnd)){
					this.$refs.uToast.show({message:'请选择结束时间'})
				}else if(
						!this.workShoftData.sunday&&
						!this.workShoftData.monday&&
						!this.workShoftData.tuesday&&
						!this.workShoftData.wednesday&&
						!this.workShoftData.thursday&&
						!this.workShoftData.friday&&
						!this.workShoftData.saturday
					){
					this.$refs.uToast.show({message:'请选择星期'})
				}else {
					this.$reqJsonPost(this.workShoftData.id?'StoreStaffScheduleDoEdit':'StoreStaffScheduleDoCreate', this.workShoftData).then(res=>{
						uni.$emit('upList', 3)
						uni.navigateBack()
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>